import React, {Component} from 'react';
import {Button, DatePicker, Input, PageHeader, Table, Icon, Dropdown, Menu } from "antd";
import {Store} from "le5le-store";
import {registerNode, Topology} from "@topology/core";
import {activityFinal, activityFinalIconRect, activityFinalTextRect} from "@topology/activity-diagram";
import {registerSelfMadeNode} from "../../Components/registerSelfMadeNode";
import reactNodes from "../../Layout/Plugin/React-nodes";
import {register as registerChart} from "@topology/chart-diagram/src/register";

// 一个 UI 组件，传入需要渲染的 data，该组件从 this.props 当中获取并进行渲染
class MyPreview extends Component {

    state = {
        x: 0,
        y: 0
    }

    canvas = null;

    timeIntervalHere = null;

    componentDidMount() {
        // 声明画布
        this.canvas = new Topology('topology-canvas-preview', {
            rotateCursor: '/rotate.cur',
            bkColor: '#f6f6f6'
        });
        // 打开相应文件
        const {data} = this.props;
        console.log("MyPreview: componentDidMount: data: ", data);
        if (data) {
            data.locked = 1;
            this.canvas.open(data);
            // 注册组件
            registerNode(
                'activityFinal',
                activityFinal,
                null,
                activityFinalIconRect,
                activityFinalTextRect
            );
            // 注册自己需要用的这些组件
            registerChart();
            registerNode('button', reactNodes(Button), null, null, null);
            registerNode('datePicker', reactNodes(DatePicker), null, null, null);
            registerNode('table', reactNodes(Table), null, null, null);
            registerNode('input', reactNodes(Input), null, null, null);
            registerSelfMadeNode();
            // 定时加载事件
            this.timeIntervalHere = setInterval(()=>{
                Store.set("backEndData", {"KKK": Math.random(), "QQQ": Math.random()})
                // console.log("MyPreview: timeIntervalHere: Fun")
                // 看一下是否获取到了那些 sql 语句
                console.log(data.sqlStr, data.address);
            }, 2000);
        }
    }

    reloadData = () => {
        const {data} = this.props;
        this.canvas.open(data);
    }

    // 实际大小
    onHandlePre = () => {
        let {x, y} = this.state;
        this.canvas.translate(-x, -y);
        this.setState({ x: 0, y: 0 })
    };

    // 自动适应窗口大小
    onHandleFit = () => {
        const rect = this.canvas.getRect();
        rect.calcCenter();
        let {x, y} = this.state;
        x = document.body.clientWidth / 2 - rect.center.x;
        y = (document.body.clientHeight - 66) / 2 - rect.center.y;
        this.setState({x, y}, ()=>{
            this.canvas.translate(x, y);
        })
    };

    // 渲染函数
    render() {
        let { availableImgWorks } = this.props;
        console.log("availableImgWorks", availableImgWorks)
        return (
            <div>
                <PageHeader
                    style={{
                        border: '1px solid rgb(235, 237, 240)'
                    }}
                    extra={[
                        <Button type="primary" key="2" onClick={() => this.onHandleFit()}>
                            自动适应窗口大小
                        </Button>,
                        <Button key="1" onClick={() => this.onHandlePre()}>
                            实际大小
                        </Button>,
                        <Dropdown
                            overlay={
                                <Menu
                                    onClick={(e)=>{
                                        let {loadImgWorkContent} = this.props;
                                        if (loadImgWorkContent){
                                            loadImgWorkContent(e.key, ()=>{
                                                this.reloadData();
                                            })
                                        }
                                    }}
                                >
                                    {availableImgWorks.map((item)=>{
                                        return <Menu.Item key={String(item.img_work_id)}>
                                            {item.title}
                                        </Menu.Item>
                                    })}
                                </Menu>
                            }
                        >
                            <Button>
                                Button <Icon type="down" />
                            </Button>
                        </Dropdown>
                    ]}
                    title="已发布"
                    // subTitle="预览"
                />
                <div id="topology-canvas-preview" style={{ height: 'calc(100vh - 66px)', width: '100vw', border: "1px solid blue"}}/>
            </div>
        );
    }

    // 析构函数
    componentWillUnmount() {
        if (this.timeIntervalHere){
            clearInterval(this.timeIntervalHere);
        }
    }

}

export default MyPreview;
